<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>穿梭框</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 100px;
      }
      #text1,
      #text2 {
        padding-bottom: 60px;
      }
    </style>
  </head>
  <body>
    <div class="layui-btn-container">
      <button type="button" class="layui-btn" lay-demo="getData">
        获取右侧数据
      </button>
      <button type="button" class="layui-btn" lay-demo="reload">
        重载实例
      </button>
    </div>

    <div id="text1"></div>

    <div class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
          <div id="text2"></div>
        </div>
      </div>
    </div>

    <div id="text3"></div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use(['transfer', 'util'], () => {
        var $ = layui.$,
          transfer = layui.transfer,
          util = layui.util;

        var ins1 = transfer.render({
          elem: '#text1',
          title: ['候选文人', '获奖文人'],
          data: [
            { value: '1', title: '李白' },
            { value: '2', title: '杜甫' },
            { value: '3', title: '贤心' },
            { value: '11', title: '鲁迅', disabled: true },
            { value: '15', title: '巴金' },
            { value: '16', title: '冰心' },
            { value: '6', title: '冰心' },
            { value: '6', title: '冰心' },
            { value: '6', title: '冰心' },
            { value: '6', title: '冰心' },
            { value: '6', title: '冰心' },
            { value: '6', title: 'Bbb' },
            { value: '6', title: 'BB' },
            { value: '6', title: 'Aa' },
            { value: '6', title: 'aa' },
          ],
          id: 'demoId',
          value: ['1', '15', '16'],
          showSearch: true, // 若区分大小写，设置 'cs'
        });

        //按钮事件
        util.event('lay-demo', {
          getData: (othis) => {
            alert(JSON.stringify(ins1.getData()));
          },
          reload: () => {
            transfer.reload('demoId', {
              value: ['6'],
              //,data: [{"value": "1", "title": "李白"}]
            });
          },
        });

        var ins2 = transfer.render({
          elem: '#text2',
          showSearch: true,
          onchange: (obj) => {
            console.log(obj);
          },
          parseData: (res) => ({
            value: res.id,
            title: res.label,
            disabled: res.disabled,
            checked: res.checked,
          }),
          data: [
            { id: '1', label: '瓦罐汤' },
            { id: '2', label: '油酥饼' },
            { id: '3', label: '炸酱面' },
            { id: '4', label: '串串香', disabled: true },
            { id: '5', label: '豆腐脑' },
            { id: '6', label: '驴打滚' },
          ],
          value: ['1', '5'],
        });
      });
    </script>
  </body>
</html>
